<template>
	<view class="login">
		<!-- #ifdef H5||APP -->
		<view class="logo">
			<image src="@/static/images/logo.png" mode="aspectFill"></image>
		</view>
			<u--form
				labelPosition="top" 
				labelWidth="70"
				:model="form" 
				:rules="rules" 
				errorType="toast"
				ref="uForm" 
				:labelStyle="{color:'#000'}">
				<u-form-item prop="username" label="手机号">
					<Input :islabel="false" name="请输入手机号" :maxlength="11" type="number" color="#000000;"  placeholder-style="color:999999;" v-model="form.username" />
				</u-form-item>
				<u-form-item prop="verify_code" label="验证码">
					<VerifyCode 
					:islabel="false" 
					name="验证码" :username="form.username" placeholder-style="color:999999;" v-model="form.verify_code" ></VerifyCode>
				</u-form-item>
				<u-form-item prop="password" label="密码">
					<Input :islabel="false" name="含字母和数字且长度为8-16位" type="password" style="color: #000;" placeholder-style="color:999999;" v-model="form.password" />
				</u-form-item>
				<u-form-item labelWidth="120" prop="repassword" label="再次输入密码">
					<Input :islabel="false" name="再次输入新密码" type="password" style="color: #000;" placeholder-style="color:999999;" v-model="form.repassword" />
				</u-form-item>
			</u--form>
		<!-- <view class="other">
			<view class="item">
				已有账号？<text @tap="back">登录</text>
			</view>
		</view> -->
		<view class="pact">
			<u-checkbox-group shape="circle" @change="changePact">
				<u-checkbox 
				labelColor="#B1B2B5"
				:checked="pact"
				size="14"
				labelSize="12"
				name="1"
				label="阅读即同意"></u-checkbox>
			</u-checkbox-group>
			<!-- @tap="toPage('/pages/Pact/index?type=user_agreement'),pact=true" -->
			<text @click="show = true">《用户服务协议》</text>
			和
			<text @click="show2 = true">《隐私政策》</text>
		</view>
		<view class="submit">
			<u-button :disabled="disabled" :loading="loading" @click="submit" style="color:#fff;font-size: 34rpx;">确定</u-button>
		</view>
		<!-- #endif -->
		
		<u-popup bgColor="transparent" round="32rpx" :show="show" @close="show = false">
			<view class="draw-lots-main-popup savepadding savebottom">
				<view class="header flex al-item ju-cont">
					<view class="header-title">
						疯传数藏平台服务协议
						<!-- {{agreement.title}} -->
					</view>
					<view class="header-close">
						<u-icon @click="show = false" name="close" color="#999999" size="22"></u-icon>
					</view>
				</view>
				<scroll-view scroll-y class="draw-lots-list">
					<PayPactPrivacy/>
				</scroll-view>
				<button @click="show=false">我已阅读并同意</button>
			</view>
		</u-popup>
		
		<u-popup bgColor="transparent" round="32rpx" :show="show2" @close="show2 = false">
			<view class="draw-lots-main-popup savepadding savebottom">
				<view class="header flex al-item ju-cont">
					<view class="header-title">
						隐私政策
						<!-- {{agreement.title}} -->
					</view>
					<view class="header-close">
						<u-icon @click="show2 = false" name="close" color="#999999" size="22"></u-icon>
					</view>
				</view>
				<scroll-view scroll-y class="draw-lots-list">
					<PayPactServe/>
				</scroll-view>
				<button @click="show2=false">我已阅读并同意</button>
			</view>
		</u-popup>
		
		<CodePopup 
			title="注册账号"
			btnText="立即注册"
			:loading="loading"
			@show="e=>codeShow=e" 
			:show="codeShow" 
			:username="form.username" 
			v-model="form.verify_code" 
			@submit="register"
		></CodePopup>
	</view>
</template>

<script>
	import {mixin} from '@/Mixins/mixin.js'
	import { mapState, mapMutations } from 'vuex'
	import Input from '@/components/Input.vue'
	import VerifyCode from '@/components/verifycode.vue'
	import CodePopup from '@/components/codePopup.vue'
	import PayPactPrivacy from '@/components/PayPactPrivacy.vue'
import PayPactServe from '@/components/PayPactServe.vue'
	export default {
		mixins:[mixin],
		components:{ Input, VerifyCode, CodePopup, PayPactPrivacy, PayPactServe },
		data() {
			return {
				loading:false,
				pact:false,
				show: false,
				show2: false,
				codeShow:false,
				form:{
					username :'',//账号
					verify_code:'',//验证码
					password:'',//密码
					repassword :'',
				},
				rules: {
					username : [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change','blur'],
						}
					],
					verify_code : [
						{
							required: true,
							message: '请输入验证码',
							trigger: ['blur', 'change']
						}
					],
					password: [
						{
							required: true,
							message: '请输入密码',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								let regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/
								return regex.test(value);
							},
							message: '密码必须为8-16位包含大小写字母和数字的组合',
							trigger: ['change','blur'],
						}
					],
					repassword:[
						{
							required: true,
							message: '请再次输入密码',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if(value === this.form.password){
									return true
								}else{
									return false
								}
							},
							message: '两次密码不相同',
							trigger: ['change','blur'],
						}
					],
				}
			}
		},
		onReady() {
			
		},
		onLoad() {
			
		},
		computed: {
			...mapState(['userInfo','token']),
			disabled(){
				if(this.form.username&&this.form.password){
					return false
				}else{
					return true
				}
			}
		},
		methods: {
			
			//更改协议状态
			changePact(e){
				console.log('[协议]',e.length)
				if(e.length>0){
					this.pact = true
				}else{
					this.pact = false
				}
			},

			submit() {
				this.$refs.uForm.validate().then(res => {
					if(!this.pact){
						uni.showToast({
						    title: '请勾选协议后继续',
							icon:'none',
						    duration: 2000
						})
						return
					}
					// this.codeShow = true
					this.register()
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			//注册
			async register(){
				this.codeShow = false
				this.loading = true
				let data = await this.$http({
					url:this.$api.register,
					method: 'POST',
					hideLoading: true,
					data:this.form
				})
				console.log('[注册]',data)
				this.loading = false
				this.form.verify_code = ''
				if(data.code==200){
					uni.$u.toast(data.msg);
					setTimeout(()=>{
						this.back()
					},1500)
				}else{
					uni.showToast({
					    title: data.msg||'注册失败',
						icon:'none',
					    duration: 2000
					})
				}
			},
			// back(){
			// 	uni.redirectTo({
			// 		url: '/pages/Login/index'
			// 	});
			// },
		}
	}
</script>

<style lang="scss" scoped>
	// #ifdef H5||APP
	.login{
		min-height: 100vh;
		padding: 80rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		// background-color: #FFF;
		background: url(@/static/images/timg2.png) no-repeat;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.logo{
			text-align: center;
			margin-bottom:66rpx;
			image{
				width: 180rpx;
				height: 180rpx;
			}
		}
		.header{
			.title{
				font-size: 52rpx;
				font-weight: 600;
				color: #000;
				line-height: 74rpx;
			}
			.des{
				font-size: 36rpx;
				font-weight: 500;
				color: #989BA4;
				line-height: 50rpx;
				margin-top: 16rpx;
				margin-bottom: 25rpx;
			}
		}
		.form {
			background: #fff;
		}
		::v-deep .u-form-item__body__left{
			margin-bottom: 0;
		}
		::v-deep .u-form-item__body{
			padding: 20rpx 0;
		}
		.submit{
			margin-top: 60rpx;
			::v-deep button{
				color: #333333;
				background:#000;
				border: 0;
				height: 82rpx;
				border-radius: 9rpx;
				&.u-button--disabled{
					opacity: 1;
					color: #979797;
					background: #252525;
				}
			}
		}
		.other{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 25rpx;
			font-weight: 400;
			color: #979797;
			line-height: 33rpx;
			text{
				color: #FFFFFF;
			}
		}
	}
	
	// #endif
	.pact{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: 600;
		color: #B1B2B5;
		// margin-top: 48rpx;
		::v-deep .u-checkbox__icon-wrap{
			// background-color: transparent!important;
		}
		text{
			font-size: 24rpx;
			color: #5F7EA3;
		}
	
	}
	
	.draw-lots-main-popup {
		padding: 48rpx 38rpx;
		background: #1E2020;
		border-radius: 30rpx 30rpx 0px 0px;
	
		.header {
			display: flex;
			justify-content: space-between;
			&-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 44rpx;
			}
	
			&-close {}
		}
	
		.draw-lots-list {
			margin-top: 20rpx;
			height: 50vh;
			overflow-y: auto;
	
			.pay-pact {
				font-size: 24rpx;
				font-weight: 400;
				color: #A0A0A0;
				line-height: 34rpx;
			}
		}
	
		button {
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #4E422C;
			background-color: #F2E0BC;
			line-height: 80rpx;
		}
	}
</style>
